<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<title>Get the coordinates on canvas</title>
<meta charset="utf-8" />

<style type="text/css">
#canvas {
	background-color: #fff;
	border: 1px solid black;
}
</style>

<script type="text/javascript">
	document.addEventListener("DOMContentLoaded", init, false);

	function init() {
		var canvas = document.getElementById("canvas");
		canvas.addEventListener("mousedown", getPosition, false);
	}

	function getPosition(event) {
		var x = new Number();
		var y = new Number();
		var canvas = document.getElementById("canvas");

		if (event.x != undefined && event.y != undefined) {
			x = event.x;
			y = event.y;
		} else // Firefox method to get the position 
		{
			x = event.clientX + document.body.scrollLeft
					+ document.documentElement.scrollLeft;
			y = event.clientY + document.body.scrollTop
					+ document.documentElement.scrollTop;
		}

		x -= canvas.offsetLeft;
		y -= canvas.offsetTop;

		alert("x: " + x + " y: " + y);
	}
</script>

</head>

<body>
	<canvas id="canvas" width="640" height="360"></canvas>
</body>
</html>